<template>
  <view class="statistic-page">
    <view class="statistic-head">
      <view class="head-title">
        <view class="title-left">2024年1月18日</view>
        <view class="title-right">净收入 <view style="color:#2F7EFC ;">23,3190元</view>
        </view>
      </view>
      <view class="head-price">¥122,390</view>
      <view style="margin-top: 10rpx;">交易198笔 ¥122,390</view>
      <view style="margin-top: 10rpx;">退款14笔 ¥1,123 </view>
    </view>
    <view class="statistic-foot">
      <view class="foot-tab">
        <u-tabs :list="list1" @click="click" :activeStyle="{color: '#2F7EFC'}"></u-tabs>
      </view>
      <view class="foot-list">
        <view class="foot-nav" v-for="item,index in 7" :key="index">
        <image src="../../../static/img/collectPage/collect.png" mode=""></image>
        <view class="nav-title">
          <view>江流</view>
          <view>19:23:56</view>
        </view>
        <view class="nav-footer">¥18</view>
        <view class="nav-refund">¥18(已退款)</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list1: [{
          name: '全部',
        }, {
          name: '退款',
        }]
      }
    },
    methods:{
      click(e){
        console.log(e,11111);
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .uni-scroll-view-content {
    display: flex;
    justify-content: center;
  }

  .statistic-page {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;

    .statistic-head {
      width: 690rpx;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 10rpx;
      box-sizing: border-box;
      padding: 30rpx;
      margin-top: 30rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #909090;

      .head-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 500;
        color: #909090;

        .title-left {
          font-size: 40rpx;
          font-weight: 500;
          color: #313131;
        }

        .title-right {
          display: flex;
        }
      }

      .head-price {
        font-size: 56rpx;
        font-weight: 500;
        color: #EABF79;
      }
    }

    .statistic-foot {
      width: 690rpx;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
      border-radius: 10rpx;
      margin-top: 20rpx;
      .foot-list{
        box-sizing: border-box;
        padding: 16rpx 30rpx 0;
        
        .foot-nav{
          height: 106rpx;
          width: 100%;
          display: flex;
          align-items: center;
          image{
            width: 76rpx;
            height: 76rpx;
            border-radius: 10rpx;
          }
          .nav-title{
            margin-left: 20rpx;
            flex: 1;
            :first-child{
              font-size: 28rpx;
              font-weight: 500;
              color: #1C1C1C;
            }
            :last-child{
              height: 34rpx;
              font-size: 24rpx;
              font-weight: 500;
              line-height: 34rpx;
              color: #909090;
            }
          }
          .nav-footer{
            height: 56rpx;
            font-size: 40rpx;
            font-weight: 500;
            line-height: 56rpx;
            color: #EABF79;
          }
          .nav-refund{
            height: 44rpx;
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            color: #313131;
          }
        }
      }
    }
  }
</style>